import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { AppGlobalService } from '../../shared/service/app-global.service';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-decoration-banner',
  templateUrl: './decoration-banner.component.html',
  styleUrls: ['./decoration-banner.component.scss'],
})
export class DecorationBannerComponent implements OnInit {
  // 组件数据
  // test: any = {
  //   "type": "tag",
  //   "style": "appDecorationCarouselTag",
  //   "name": null,
  //   "linearLayout": "",
  //   "data": {
  //     "data": [
  //       {
  //         "image": "xxx",
  //         "beforeUrl": "xxx",
  //         "link": {
  //           "type": "page",
  //           "params": {
  //             "a": "v"
  //           },
  //           "target": "234150"
  //         },
  //         "tips": "xxx"
  //       },
  //       {
  //         "image": "https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_8f4c788fceec915b28db630ed434d375.jpg",
  //         "link": {
  //           "type": "page",
  //           "params": {
  //             "a": "v"
  //           },
  //           "target": "10012"
  //         }
  //       },
  //       {
  //         "image": "https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_a87903fee312d2d54b58f364d6db7a4b.jpg",
  //         "link": {
  //           "type": "page",
  //           "params": {
  //             "a": "v"
  //           },
  //           "target": "333"
  //         }
  //       }
  //     ],
  //     "showSlider": "true",
  //     "count": "3",
  //     "style": "height:7rem;border-radius:0.31rem;",
  //     "autoPlay": "true",
  //     "delay": "600",
  //     "info": [
  //       {
  //         "txt": "认证合作公司",
  //         "icon": "../../../assets/icon/decoration_ban_icon_1.png"
  //       },
  //       {
  //         "txt": "认证合作公司",
  //         "icon": "../../../assets/icon/decoration_ban_icon_2.png"
  //       },
  //       {
  //         "txt": "认证合作公司",
  //         "icon": "../../../assets/icon/decoration_ban_icon_3.png"
  //       }
  //     ]
  //   }
  // };
  cardData: any;

  constructor(private appGlobalService: AppGlobalService) { }

  @ViewChild('slideImg') slides: IonSlides;
  // @Input() tagData: any;
  tagData: any = { images: [], style: {} };
  slideOpts: any;
  idx: any = 1;
  cssStr: any = {};
  images: any;

  ngOnInit() {
    this.cardData = this.tagData;
    console.log(this.tagData);
    const cssStyles = this.tagData.data.style.split(";");
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < cssStyles.length; i++) {
      const cssStrs = cssStyles[i].split(":");
      this.cssStr[cssStrs[0]] = cssStrs[1];
    }
    const isauto = this.tagData.data.autoPlay === 'true' ? true : false;
    this.slideOpts = {
      initialSlide: 0,
      slidesPerView: 1,
      autoplay: {
        delay: (this.tagData.data.delay * 1000) || 3000,
      },
      speed: 400,
      loop: this.tagData.data.data.length > 1 ? true : false,
      // autoplayDisableOnInteraction: false
    };
    console.log(this.slideOpts);
  }

  slidesDidLoad(slides: IonSlides) {
    const that = this;
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      that.idx = index;
    });
  }

  getprevIndex() {
    this.idx -= 1;
  }

  getnextIndex() {
    this.idx += 1;
  }

  getIndex(slides: IonSlides) {
    const that = this;
    slides.getActiveIndex().then(index => {
      that.idx = index;
      if (that.idx <= that.tagData.data.data.length) {
        that.idx = index;
      } else {
        that.idx = 1;
      }
    });
  }

    // ion-slides 触发轻敲事件
    clickImg() {
      // console.log(this.slides.realIndex);
      const index = this.slides.getActiveIndex();
      this.slides.getActiveIndex().then(index => {
        const leng = this.tagData.data.data.length;
        if (index > leng) {
          index = index - leng - 1;
        } else if (index === 0) {
          index = leng - 1; // 第0张是最后一张图片
        } else {
          index--;
        }
        console.log(index);
        this.clickLink(this.tagData.data.data[index].link);
      });
    }

  clickLink(obj) {
    console.log(obj);
    if (!obj) {
      console.log('没有返回link-target');
    }
    if (obj.type !== 'url') {
      const pageParams = {
        pageId: obj.target,
        params: obj.params,
        sessionId: localStorage.getItem('sessionId')
      };
      this.appGlobalService.goToForward(pageParams);
    } else {
      // window.location.href = obj.target;
      this.appGlobalService.openUrl(null, obj.target);
    }
  }

}
